<template>
  <div class="bg-a">
    <div class="container-title">基础设置</div>
    <Form ref="form" :label-width="170" :rules="rule" :model="form">
      <Row class="pr">
        <i-col span="8">
          <FormItem label="活动标签" prop="tag">
            <Select v-model="form.tag" :disabled="isShelf !== 'UNDER'" filterable clearable>
              <Option v-for="(item, index) in factoryTag" :key="index" :value="item.id">{{ item.label }}</Option>
            </Select>
          </FormItem>
        </i-col>
      </Row>
      <Row class="pr">
        <i-col span="8">
          <FormItem label="促销名称" prop="name">
            <Input v-model="form.name" placeholder="请输入促销名称" :disabled="isShelf !== 'UNDER'" :maxlength="15" />
          </FormItem>
        </i-col>
      </Row>
      <Row class="pr">
        <i-col span="16">
          <FormItem label="宣传语" prop="propagate">
            <Input v-model="form.propagate" :disabled="isShelf !== 'UNDER'" placeholder="请输入宣传语" />
          </FormItem>
        </i-col>
      </Row>
      <Row class="pr">
        <i-col span="8">
          <FormItem label="库存预警">
            <RadioGroup v-model="form.isSet">
              <Radio label="0" :disabled="isShelf !== 'UNDER'">不设置</Radio>
              <Radio label="1" :disabled="isShelf !== 'UNDER'">设置</Radio>
            </RadioGroup>
          </FormItem>
        </i-col>
      </Row>
      <Row class="pr">
        <i-col v-if="!bargainIsSet" span="24">
          <div class="all-select col-li">
            <div>
              <FormItem
                v-for="(item, index) in form.phoneList"
                :key="index"
                :label="index< 1 ? '预留手机' : ''"
                :prop="'phoneList.' + index + '.value'"
                :rules="{validator: validatePhone, trigger: 'blur'}"
              >
                <Input v-model="item.value" :disabled="isShelf !== 'UNDER'" placeholder="请输入手机号" maxlength="11" />
              </FormItem>
            </div>
            <ul class="col-ul">
              <li v-for="(item, index) in form.phoneList" :key="index">
                <Button
                  v-show="index<1"
                  type="primary"
                  :disabled="isShelf !== 'UNDER'"
                  icon="md-add"
                  size="small"
                  @click="onAddPhone"
                />
                <Button
                  v-show="index>0"
                  type="primary"
                  :disabled="isShelf !== 'UNDER'"
                  icon="md-remove"
                  size="small"
                  @click="onReducePhone(index)"
                />
              </li>
            </ul>
          </div>
        </i-col>
      </Row>
      <Row class="pr">
        <i-col v-if="!bargainIsSet" span="8">
          <FormItem label="阈值" prop="warningQuantity">
            <InputNumber v-model="form.warningQuantity" :disabled="isShelf !== 'UNDER'" placeholder="请输入阈值" />
          </FormItem>
        </i-col>
      </Row>
      <Row class="pr">
        <i-col span="8">
          <FormItem label="活动时间" prop="date">
            <fomatDate v-model="$store.state.bargain.form.date" :date-value="$store.state.bargain.form.date" :disabled="isShelf !== 'UNDER'" />
            <!-- <DatePicker @on-change="onSelectTime" :options="options" placeholder="开始时间" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" v-model="form.date"></DatePicker> -->
          </FormItem>
        </i-col>
      </Row>
      <Row class="pr">
        <i-col span="8">
          <FormItem label="积分返利/优惠券激活限时" prop="integralDate">
            <fomatDate v-model="$store.state.bargain.form.integralDate" :date-value="$store.state.bargain.form.integralDate" :disabled="isShelf !== 'UNDER'" />
          </FormItem>
        </i-col>
      </Row>
      <Row class="pr">
        <i-col span="8">
          <FormItem label="例外延时激活限时">
            <fomatDate v-model="$store.state.bargain.form.delayDate" :date-value="$store.state.bargain.form.delayDate" :disabled="isShelf !== 'UNDER'" />
          </FormItem>
        </i-col>
      </Row>
      <Row class="pr">
        <i-col span="8">
          <FormItem label="例外经销商">
            <RadioGroup v-model="form.disribuTypeDelay">
              <Radio label="1" :disabled="isShelf !== 'UNDER'">指定经销商</Radio>
            </RadioGroup>
          </FormItem>
        </i-col>
      </Row>
      <DepartmentTree ref="delayDeptTree" :disabled="isShelf !== 'UNDER'" />
      <delayTransferEdit :disabled="isShelf !== 'UNDER'" />
      <Row class="pr">
          <FormItem label="经销商">
            <RadioGroup v-model="form.disribuType">
              <Radio label="0" :disabled="isShelf !== 'UNDER'">全部</Radio>
              <Radio label="1" :disabled="isShelf !== 'UNDER'">指定经销商</Radio>
            </RadioGroup>
          </FormItem>
      </Row>
      <DepartmentTree ref="deptTree"  v-show="!bargainAllDistributor" :isGetDept='false' dataType='distribute' :disabled="isShelf !== 'UNDER'" />
      <transferEdit v-if="!bargainAllDistributor" :disabled="isShelf !== 'UNDER'" />
      <Row class="pr">
        <FormItem label="包邮">
          <Checkbox v-model="form.isParcel" :disabled="isShelf !== 'UNDER'">包邮</Checkbox>
          <div v-show="form.isParcel">
            <RadioGroup v-model="form.parcelContent.factoryParcelTypeEnum">
              <Radio label="AMOUNT" :disabled="isShelf !== 'UNDER'">
                <span>按金额</span>
                <div>
                  <span>订单总金额满多少包邮</span>
                  <InputNumber v-model="form.parcelContent.amount" :min="0" :disabled="isShelf !== 'UNDER'" />
                </div>
              </Radio>
              <Radio label="PRODUCT_NUM" :disabled="isShelf !== 'UNDER'">
                <span>按商品数量</span>
                <div>
                  <span>订单商品总数量满多少包邮</span>
                  <InputNumber v-model="form.parcelContent.num" :min="0" :disabled="isShelf !== 'UNDER'" />
                </div>
              </Radio>
            </RadioGroup>
          </div>
        </FormItem>
      </Row>
      <Row class="pr">
        <i-col span="24">
          <FormItem label="消息提醒">
            <div class="flex-start">
              <div>
                <Checkbox v-model="form.phoneRemind.allRemind" :disabled="isShelf !== 'UNDER'" class="info w114" @on-change="onChangeRemind">开启锁屏消息提醒</Checkbox>
              </div>
              <div class="font-red">（提醒：如同一时间有多个活动，只需对其中一个活动设置锁屏消息提醒即可）</div>
            </div>
          </FormItem>
        </i-col>
      </Row>
      <!-- 活动前 -->
      <Row class="flexTop">
        <FormItem
          prop="phoneRemind.listRemind[0].time"
        >
          <div class="flex-start next-left">
            <div>
              <Checkbox v-model="form.phoneRemind.listRemind[0].isRemind" :disabled="isShelf !== 'UNDER'" class="info" @on-change="onChangeOneRemind">开启</Checkbox><span>活动开始前</span>
            </div>
            <div>
              <InputNumber v-model="form.phoneRemind.listRemind[0].time" :disabled="isShelf !== 'UNDER'" />小时
            </div>
          </div>
        </FormItem>
        <FormItem prop="phoneRemind.listRemind[0].text" class="form-item">
          <div>  提醒文案(点击跳工厂特价活动的页面)：</div>
          <div><Input v-model="form.phoneRemind.listRemind[0].text" :disabled="isShelf !== 'UNDER'" :rows="3" type="textarea" /></div>
        </FormItem>
      </Row>
      <!-- 活动中 -->
      <Row class="flexTop">
        <FormItem>
          <div class="flex-start">
            <div>
              <Checkbox v-model="form.phoneRemind.listRemind[1].isRemind" :disabled="isShelf !== 'UNDER'" class="info" @on-change="onChangeOneRemind">开启</Checkbox><span>活动开始时</span>
            </div>
          </div>
        </FormItem>
        <FormItem prop="phoneRemind.listRemind[1].text" class="form-item">
          <div>  提醒文案(点击跳工厂特价活动的页面)：</div>
          <div><Input v-model="form.phoneRemind.listRemind[1].text" :disabled="isShelf !== 'UNDER'" :rows="3" type="textarea" /></div>
        </FormItem>
      </Row>
      <!-- 活动结束前 -->
      <Row class="flexTop">
        <FormItem prop="phoneRemind.listRemind[2].time">
          <div class="flex-start next-left">
            <div>
              <Checkbox v-model="form.phoneRemind.listRemind[2].isRemind" :disabled="isShelf !== 'UNDER'" class="info" @on-change="onChangeOneRemind">开启</Checkbox><span>活动结束前</span>
            </div>
            <div>
              <InputNumber v-model="form.phoneRemind.listRemind[2].time" :disabled="isShelf !== 'UNDER'" />小时
            </div>
          </div>
        </FormItem>
        <FormItem prop="phoneRemind.listRemind[2].text" class="form-item">
          <div>  提醒文案(点击跳工厂特价活动的页面)：</div>
          <div><Input v-model="form.phoneRemind.listRemind[2].text" :disabled="isShelf !== 'UNDER'" :rows="3" type="textarea" /></div>
        </FormItem>
      </Row>
      <Row class="pr">
        <i-col span="24">
          <FormItem label="支付方式设置">
            <RadioGroup v-model="form.payDistributorJoinType">
              <Radio label="WHOLE" :disabled="isShelf !== 'UNDER'">活动内全部经销商</Radio>
              <Radio label="PART" :disabled="isShelf !== 'UNDER'">活动内指定经销商<span class="font-red">未设置支付方式的经销商可使用所有支付方式</span></Radio>
            </RadioGroup>
          </FormItem>
        </i-col>
      </Row>
      <!-- 支付设置经销商 -->
      <payTransfer v-if="!bargainAllPayDistributor" :disabled="isShelf !== 'UNDER'" />
      <Row>
        <i-col span="24">
          <FormItem label="可使用的支付方式">
            <CheckboxGroup v-model="form.payMethodTypeEnumList">
              <Checkbox v-for="item in list.payList" :key="item.id" :label="item.value" :disabled="item.id == 1 || isShelf !== 'UNDER'">{{ item.text }}</Checkbox>
            </CheckboxGroup>
          </FormItem>
        </i-col>
      </Row>
      <!-- 水印照片 -->
      <Row>
        <Col span="24" />
        <FormItem label="主图水印" prop="mainImg">
          <PictureEditItem
            :upload-list="form.mainImg"
            :maxlength="1"
            :large="true"
            :disabled="isShelf !== 'UNDER'"
            @uploadPic="uploadPic($event, 'mainImg')"
          />
        </FormItem>
        </Col>
      </Row>
    </Form>
    <!-- <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=990236560&site=在线客服&menu=yes">
      <img src="images/qq_01.png" alt="点击这里给我发消息" title="点击这里给我发消息">
    </a> -->
  </div>
</template>
<script>
import transferEdit from './transferItem'
import delayTransferEdit from './delayTransferItem'
import payTransfer from './payTransferItem'
import fomatDate from '@/components/ChoseDateFormat'
import listData from './DefaultEditItemData'
import { mapGetters } from 'vuex'
import PictureEditItem from '~/PictureEditItem'
import DepartmentTree from './DepartmentTree'
const phoneValid = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入手机号'))
  } else if (!(/^[1][3|4|5|6|7|8|9]\d{9}$/.test(value))) {
    callback(new Error('请输入正确格式的手机号'))
  } else {
    callback()
  }
}
const phoneTime = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入时间'))
  } else if (!(/^[0-9]*[1-9][0-9]*$/.test(value))) {
    callback('请输入正整数')
  } else {
    callback()
  }
}
const phoneContent = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入提醒文案'))
  } else {
    callback()
  }
}
export default {
  components: {
    transferEdit,
    delayTransferEdit,
    fomatDate,
    payTransfer,
    PictureEditItem,
    DepartmentTree
  },
  props: {
    form: {
      type: Object
    }
  },
  data () {
    return {
      area: [],
      id: this.$route.query.id || '',
      options: {
        disabledDate (date) {
          return date && date.valueOf() < Date.now() - 86400000
        }
      },
      rule: {
        tag: [{ required: true, message: '请输入活动标签', trigger: 'change' }],
        name: [{ required: true, message: '请输入促销名称', trigger: 'blur' }],
        phone: [{ required: true, validator: phoneValid, trigger: 'blur' }],
        integralDate: [{ required: true,
          message: '请设置积分返利/优惠券限时间',
          trigger: 'change',
          type: 'array'
          // fields: {
          //     0: {type: 'date', required: true, message: '请输入起止日期'},
          //     1: {type: 'date', required: true, message: '请输入起止日期'}
          // }
        }],
        date: [{ required: true,
          message: '请设置活动时间',
          trigger: 'change',
          type: 'array'
          // fields: {
          //     0: {type: 'date', required: true, message: '请输入起止日期'},
          //     1: {type: 'date', required: true, message: '请输入起止日期'}
          // }
        }],
        'phoneRemind.listRemind[0].time': [{
          validator: phoneTime, trigger: 'blur'
        }],
        'phoneRemind.listRemind[0].text': [{
          validator: phoneContent, trigger: 'blur'
        }],
        'phoneRemind.listRemind[1].text': [{
          validator: phoneContent, trigger: 'blur'
        }],
        'phoneRemind.listRemind[2].time': [{
          validator: phoneTime, trigger: 'blur'
        }],
        'phoneRemind.listRemind[2].text': [{
          validator: phoneContent, trigger: 'blur'
        }]
      },
      isShelf: 'UNDER',
      list: listData,
      isFreeShipping: false
    }
  },
  computed: {
    ...mapGetters([
      'factoryTag',
      'bargainIsSet',
      'bargainAllDistributor',
      'bargainIsCurrencyNum',
      'bargainAllPayDistributor'
    ])
  },
  mounted () {
    this.$store.dispatch('getfactoryTag')
    this.id && this.$store.dispatch('getShelfStatus', this.id).then(data => {
      this.isShelf = data
    })
  },
  methods: {
    /**
     * 用于触发DepartmentTree组件获取左侧经销商数据 不能自己触发接口
     * 因为编辑时可能获取数据早于详情接口 导致无法过滤已选数据
     */
    getDeptTreeData() {
      this.$refs.delayDeptTree.getData()
      this.$refs.deptTree.getData()
    },
    uploadPic (pl, type) {
      let img = pl.map(item => item.imgUrl).join(',')
      img = img ? [{ imgUrl: img, status: 'finished' }] : []
      this.$store.state.bargain.form[type] = img
    },
    onClickStoreList () {
      this.$refs.storeEdit.setShowMotal()
    },
    onChangeOneRemind () {
      this.$store.commit('changeRemind')
    },
    onChangeRemind () {
      this.$store.commit('changeRemindAll')
    },
    onChangeDate (res) {
      this.$store.state.bargain.form.date = res
    },
    onSelectTime (x1, x2) {
      let newDate = []
      newDate.push(new Date(x1[0].split(' ')[0] + ' 00:00:00'))
      newDate.push(new Date(x1[1].split(' ')[0] + ' 23:59:59'))
      this.$store.state.bargain.form.date = newDate
    },
    onChangeStoreNum () {
      this.form.isStoreType = !JSON.parse(JSON.stringify(this.form.storeNum))
    },
    onChangeStoreType () {
      this.form.storeNum = !this.form.isStoreType
    },
    isTotalPhone (data) {
      let phoneLength = this.$store.state.bargain.form.phoneList.filter((item, index) => { return data == item.value })
      return phoneLength.length
    },
    validatePhone (rule, value, callback) {
      if (!value) {
        callback(new Error('请输入手机号'))
      } else if (!(/^[1][3|4|5|6|7|8|9]\d{9}$/.test(value))) {
        callback(new Error('请输入正确格式的手机号'))
      } else if (this.isTotalPhone(value) >= 2) {
        callback(new Error('手机号不能相同'))
      } else {
        callback()
      }
    },
    onAddPhone () {
      this.$store.commit('onAddPhoneBargain')
    },
    onReducePhone (index) {
      this.$store.commit('onAddReducePhoneBargain', index)
    }
  }
}
</script>

